<!--收益管理-->
<template>
  <div class="page-container main">
    <div class="tool-container">
      <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
        <!-- <el-form-item prop="vendorId">
          <el-select v-model="queryParams.vendorId" placeholder="酒店名称" clearable filterable>
            <el-option v-for="item in vendors" :key="item.vendorId" :label="item.name" :value="item.vendorId"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-date-picker
            v-model="times"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY/MM/DD hh:mm:ss"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="tabel-container myTable">
      <vxe-table ref="tableRef" :data="tableData" v-loading="loading" @sort-change="sort">
        <vxe-table-column :resizable="true" type="seq" title="序号" width="80"></vxe-table-column>
        <vxe-table-column :resizable="true" field="startFrom" title="结算周期起止" width="280">
          <template #default="{ row }">
            <span v-if="row.startFrom">
              {{ row.startFrom.replace("T", " ").replace("Z", " ") }}-{{
              row.endTo.replace("T", "").replace("Z", " ") }}
            </span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="vendorName" title="酒店名称" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="tradingAmount" title="成交额(元)" sortable>
          <template #default="{ row }"> {{ row.tradingAmount / 100.0 }} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="oxiInhalerAmount" title="用氧收益(元)" sortable>
          <template #default="{ row }"> {{ row.oxiInhalerAmount / 100.0 }} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="oxiChargingAmount" title="充灌收益(元)" sortable>
          <template #default="{ row }"> {{ row.oxiChargingAmount / 100.0 }} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="vendorProfitsAmount" title="酒店收益(元)" sortable>
          <template #default="{ row }"> {{ row.vendorProfitsAmount / 100.0 }} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="vendorProfitsTotal" title="累计收益(元)" sortable>
          <template #default="{ row }"> {{ row.vendorProfitsTotal / 100.0 }} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="vendorBalance" title="账户余额(元)" sortable>
          <template #default="{ row }"> {{ row.vendorBalance / 100.0 }} </template>
        </vxe-table-column>
        <vxe-column field="id" title="操作" width="100" fixed="right" show-overflow>
          <template #default="{ row }">
            <el-button link type="primary" @click="handleInfo(row)">详情</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="myPager">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';
import { profitsList } from '@/api/vendor/profits/index';
import common from '@/utils/common.ts';
import { listVendor } from '@/api/vendor';

export default {
  components: {},
  computed: {
    times: {
      get() {
        return [this.queryParams.startFrom, this.queryParams.endTo];
      },
      set(value) {
        if (value != null) {
          this.queryParams.startFrom = value[0];
          this.queryParams.endTo = value[1];
        } else {
          this.queryParams.startFrom = null;
          this.queryParams.endTo = null;
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 1,
      proxy: null,
      vendors: [],
      queryParams: {
        regionCode: null,
        startFrom: null,
        endTo: null,
        vendorId: null,
        pageNum: 1,
        pageSize: 20
      },
      dom: {
        proxy: null,
        rightComponent: {
          show: false,
          title: '测试'
        }
      },
      currentItem: null
    };
  },
  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.proxy = proxy;

    const route = useRoute();

    this.init();
  },
  methods: {
    init() {
      // this.getVendorList();
      this.getList();
    },

    /**
     * 排序
     * @param field
     * @param order
     */
    sort(field, order) {
      let fieldName = field.field;
      if (fieldName == 'vendorName') fieldName = 'vendorId';

      this.queryParams.orderByColumn = fieldName;
      this.queryParams.isAsc = field.order;

      this.getList();
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 查询酒店列表 */
    getVendorList() {
      listVendor({
        pageNum: 1,
        regionCode: this.queryParams.regionCode,
        pageSize: 10000
      }).then((res) => {
        this.vendors = res.rows;
      });
    },

    resetQuery() {
      this.$refs['queryFormRef'].resetFields();
      this.times = null;
    },

    /**
     * 查询数据
     */
    getList() {
      this.loading = true;
      profitsList(this.queryParams).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.tableData = res.rows;
        } else {
          ElMessage.error(res.msg);
        }
      });
    },

    /**
     * 详情
     */
    handleInfo(row) {
      this.proxy?.$tab.openPage('/vendorInfo/vendorAccount/info', '酒店收益详情', row);
    }
  }
};
</script>
